import React, { Component } from 'react'
import { login } from '../../request/api'
import { NavBar, Icon } from 'antd-mobile';
import '../../assets/css/loginbar.css';
export default class Login extends Component {
    constructor() {
        super()
        this.state = {
            user: {
                phone: "",
                password: ""
            }
        }
    }
    changeUser(e, type) {
        this.setState({
            user: {
                ...this.state.user,
                [type]: e.target.value
            }
        })
    }
    login() {
        if (this.state.user.phone !== "" && this.state.user.password !== "") {
            login(this.state.user).then(res => {
                if (res.code === 200) {
                    sessionStorage.setItem("user", JSON.stringify(res.list))
                    alert("登录成功")
                    console.log(res);
                    this.props.history.push("/index/home")
                }
            })
        } else {
            alert("用户登录信息不能为空")
        }

    }
    toBack(){
        this.props.history.push("/index/home")
    }
    render() {
        const { user: { phone, password } } = this.state
        return (
            <>
             <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.toBack()}
                >登录</NavBar>
                <div className="login-mb">
                    <div className="inner">
                        <img src="images/pic/logo/orange.png" alt="" />

                        <div className="form">
                            <input
                                type="tel"
                                placeholder="手机号"
                                pattern="^1[3,5,9,8,6][0-9]{9}$"
                                required
                                value={phone}
                                onChange={(e) => this.changeUser(e, "phone")}
                            />
                            <div className="yzm">
                                <input
                                    type="text"
                                    placeholder="密码"
                                    pattern="[0-9]{1,4}"
                                    value={password}
                                    required
                                    onChange={(e) => this.changeUser(e, "password")}
                                />
                            </div>
                            <input type="submit" name="" id="" value="登  录" onClick={() => this.login()} />
                        </div>
                    </div>
                </div>
            </>
        )
    }
}
